import React from 'react';
import './inspection.less';
import { Breadcrumb, Row, Col, Input, Select, Button, Table, Pagination, Radio, message, Modal } from 'antd';
import Config from '../../common/config';
import $ from 'jquery';

const Option = Select.Option;
const config = new Config();
const InputGroup = Input.Group;
const token = sessionStorage.getItem('token');

class Inspection extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [], // 订单数据
            text: '', // 搜索值
            status: undefined, // 审核状态
            page: 1, // 当前页
            pageSize: 10, // 每页显示的条数
            total: 0, // 总条数
            syncVisibile: false, // 自动同步模态框
            minute: '30', // 自动同步时间
            pictureVisible: false, // 图片模态框
            showOrder: {}, // 图片展示的订单
        }
        this.changeText = this.changeText.bind(this);
        this.selectStatus = this.selectStatus.bind(this);
        this.onChangePage = this.onChangePage.bind(this);
        this.syncPrescription = this.syncPrescription.bind(this);
        this.showAutoSync = this.showAutoSync.bind(this);
        this.selectTime = this.selectTime.bind(this);
        this.hiddenAutoSync = this.hiddenAutoSync.bind(this);
        this.autoSync = this.autoSync.bind(this);
        this.hiddenPicture = this.hiddenPicture.bind(this);
    }

    componentDidMount() {
        this.getData();
    }

    // 获取数据
    getData() {
        $.ajax({
            url: `${config.JuseOrder}/orderInspection/list`,
            type: 'get',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data: {
                text: this.state.text,
                status: this.state.status,
                page: this.state.page,
                pageSize: this.state.pageSize
            },
            success: (res) => {
                console.log('订单数据', res);
                if (res.code === 200) {
                    res.data.rows.forEach((item, index) => {
                        item.key = index + 1 + (this.state.page - 1) * this.state.pageSize;
                    });
                    this.setState({
                        data: res.data.rows,
                        total: res.data.count
                    });
                }
            }
        });
    }

    // 表头
    getColumns() {
        return [{
            width: '10%',
            title: '序号',
            dataIndex: 'key'
        }, {
            title: '订单编号',
            width: '16%',
            dataIndex: 'orderId'
        }, {
            title: '姓名',
            width: '12%',
            render(record) {
                return record['patient_information'].patientName
            }
        }, {
            title: '身份证',
            width: '16%',
            render(record) {
                return record['patient_information'].patientCardNumber
            }
        }, {
            title: '处方图片',
            width: '14%',
            render: (record) => {
                return <a href='javascript:void(0)' onClick={this.showPicture.bind(this, record)}>查看</a>
            }
        }, {
            title: '备注',
            width: '18%',
            render(record) {
                return record['patient_information'].remark
            }
        }, {
            title: '审核是否通过',
            width: '14%',
            render(record) {
                let text;
                switch (record.prescriptionStutas) {
                    case 1:
                        text = '未审核';
                        break;
                    case 2:
                        text = '审核通过';
                        break;
                    case 3:
                        text = '审核不通过';
                        break;
                }
                return text;
            }
        }];
    }

    // 搜索值
    changeText(e) {
        this.setState({
            text: e.target.value
        });
    }

    // 选择审核结果
    selectStatus(value) {
        this.setState({
            status: value
        });
    }

    // 搜索/重置
    filterOrders(key) {
        console.log(1);
        if (key) {
            // 搜索
            this.setState({
                page: 1
            }, () => {
                this.getData();
            });
        } else {
            // 清空
            this.setState({
                text: '',
                status: undefined
            }, () => {
                this.getData();
            });
        }
    }

    // 切换分页
    onChangePage(page) {
        this.setState({
            page
        }, () => {
            this.getData();
        });
    }

    // 手动同步
    syncPrescription() {
        $.ajax({
            url: `${config.JuseOrder}/orderInspection/sync`,
            type: 'post',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data: {
            },
            success: (data) => {
                console.log('手动同步', data);
                if (data.code === 200) {
                    this.getData();
                }
            }
        });
    }

    // 显示自动同步模态框
    showAutoSync() {
        this.setState({
            syncVisibile: true
        });
    }

    // 隐藏自动同步模态框
    hiddenAutoSync() {
        this.setState({
            syncVisibile: false
        });
    }

    // 选择自动同步时间
    selectTime(value) {
        this.setState({
            minute: value
        });
    }

    // 自动同步
    autoSync() {
        $.ajax({
            url: `${config.JuseOrder}/orderInspection/autoSync`,
            type: 'post',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data: {
                minute: this.state.minute
            },
            success: (data) => {
                console.log('自动同步', data);
                if (data.code === 200) {
                    this.setState({
                        syncVisibile: false
                    });
                }
            }
        });
    }

    // 显示图片模态框
    showPicture(order) {
        this.setState({
            showOrder: order,
            pictureVisible: true
        });
    }

    // 隐藏图片模态框
    hiddenPicture() {
        this.setState({
            showOrder: {},
            pictureVisible: false
        });
    }

    render() {
        return (
            <div className='contentBox clearfix'>
                <div className='breadcrumb'>
                    <Breadcrumb separator=">">
                        <Breadcrumb.Item>订单管理</Breadcrumb.Item>
                        <Breadcrumb.Item>远程审单</Breadcrumb.Item>
                    </Breadcrumb>
                </div>
                <div className='member-content-Search clearfix' style={{ marginBottom: 0, float: 'none' }}>
                    <div className='orderfilter'>
                        <div className='addetd addetd-z' style={{ zIndex: 1 }}>
                            <Input addonBefore="姓名、订单号、身份证" placeholder="请输入" value={this.state.text} onChange={this.changeText} />
                        </div>
                        <div className='addetd addetd-a addetd-ko addetd-ky yofan-aduo'>
                            <InputGroup compact>
                                <span className='chengge-a voyi-a'>是否通过审核</span>
                                <Select value={this.state.status} onChange={this.selectStatus} placeholder='请选择' allowClear style={{ width: 120, marginLeft: 45 }}>
                                    <Option value='1'>待审核</Option>
                                    <Option value='2'>审核通过</Option>
                                    <Option value='3'>审核不通过</Option>
                                </Select>
                            </InputGroup>
                        </div>
                        <Button type='primary' className='member-button' icon="search" onClick={this.filterOrders.bind(this, 1)}>搜索</Button>
                        <Button type='primary' className='member-button' icon="reload" onClick={this.filterOrders.bind(this, 0)}>重置</Button>
                    </div>
                </div>
                <div className='chengge-b'>
                    <Row>
                        <Col offset={20} span={2}><Radio checked><a href='javascript:void(0)' onClick={this.showAutoSync}>自动同步</a></Radio></Col>
                        <Col span={2}><a href='javascript:void(0)' onClick={this.syncPrescription}>手动同步</a></Col>
                    </Row>
                </div>
                <div className='allgoods-table clearfix'>
                    <Table columns={this.getColumns()} dataSource={this.state.data} pagination={false} bordered />
                </div>
                <div className='goods-label-let'>
                    <div className="floor-ppagi">
                        {
                            this.state.total == 0 ?
                                <p className="floor-ppagip">
                                    共{this.state.total}条记录
                        </p> :
                                <p className="floor-ppagip">
                                    当前显示
                            {this.state.pageSize * (this.state.page - 1) + 1}—
                            {this.state.pageSize * this.state.page < this.state.total ? this.state.pageSize * this.state.page : this.state.total}条记录，
                            共{this.state.total}条记录
                        </p>
                        }
                        <Pagination current={this.state.page} total={this.state.total || 1} defaultPageSize={this.state.pageSize} onChange={this.onChangePage.bind(this)} />
                    </div>
                </div>
                <Modal
                    title='自动同步设置'
                    visible={this.state.syncVisibile}
                    closable={false}
                    onCancel={this.hiddenAutoSync}
                    onOk={this.autoSync}
                >
                    <div>
                        <span>同步时间：</span>
                        <Select onChange={this.selectTime} value={this.state.minute} style={{ width: 120 }}>
                            <Option value='10'>每隔10分钟</Option>
                            <Option value='20'>每隔20分钟</Option>
                            <Option value='30'>每隔30分钟</Option>
                            <Option value='40'>每隔40分钟</Option>
                            <Option value='50'>每隔50分钟</Option>
                            <Option value='60'>每隔1小时</Option>
                        </Select>
                    </div>
                </Modal>
                <Modal
                    visible={this.state.pictureVisible}
                    onCancel={this.hiddenPicture}
                    footer={null}
                    className={'chengge-c'}
                >
                    {
                        this.state.showOrder.patient_information
                            ?
                            <div>
                                {this.state.showOrder.patient_information.prescriptionPicture.split(',').map((item, index) => {
                                    return <a key={index} href={item} target='_blank'>
                                        <img src={item} style={{ width: 490, height: 490, marginTop: 20 }} />
                                    </a>
                                })}
                            </div>
                            :
                            ''
                    }
                </Modal>
            </div>
        )
    }
}

export default Inspection;